<template>
    <h1>一个人的信息</h1>
    <h2>姓名：{{person.name}}</h2>
    <h2>年龄：{{person.age}}</h2>
    <button @click="test1">测试触发一下demo组件的hello事件</button>
</template>

<script>
    import {reactive} from "vue"
    
export default {
    name:"Demo",
    /* beforeCreate(){
        console.log("///beforeCreate",this);
    }, */
    props:["msg"],
    emits:["hello"],
    setup(props,context){
        // console.log("///setup",props);
        // console.log("///setup",context.attrs);//相当于vue2中的$attrs
        // console.log("///setup",context.emit);//触发自定义事件
        console.log("///setup",context.slots);//相当于vue2中的$attrs
        let person = reactive({
            name:"张三",
            age : 18,
        });

        function test1(){
            context.emit("hello",666);
        }

        //返回一个对象(常用)
        return{
            person,
            test1,
        }
    }
}
</script>


